import React, {useState, useEffect, useLayoutEffect} from 'react'

import useChapterContext, {ChapterContext} from '@/hooks/useChapterContext'
import SimulatorCard from '@/components/SimulatorCard'
import axios from 'axios'
import PropertyCard from '../Editor/Base/PropertyCard'
import Drawer from '@mui/material/Drawer';
import ListIcon from '@mui/icons-material/List';
import IconButton from '@mui/material/IconButton'

const useData = ()=>{
  const [data, setData] = useState()
  const _getData = async()=>{
    axios.get('http://ssg.worldzb.cn/oasis').then(res=>{
      setData(res.data.Data)
    })
  }
  useEffect(()=>{
    _getData()
  },[])
  return {
    _getData,
    data
  }
}

export default function Play () {
  const ChapterContextState = useChapterContext()
  const [chapter, setChapter] = ChapterContextState.chapter
  const [_, setRefresh] = ChapterContextState.refresh
  const [currentCard, setCurrentCard] = ChapterContextState.currentCard
  const {data}:{data:any} = useData()
  const [open, setOpen] = useState(false)
  
  useEffect(()=>{
    try{
      chapter.toObj(data as JSON)
      setCurrentCard(Object.keys(chapter.nodes)[0])
    }catch(err){}
    setRefresh(new Date().getTime())
  },[data])
  return <ChapterContext.Provider value={ChapterContextState}>
    <div style={{display:'flex', height:'100%', justifyContent:'center', alignItems:'center', marginTop:'-10%'}}>
      <SimulatorCard  />
      <Drawer anchor="left" style={{width:'50%', padding:20}} onClose={()=>setOpen(!open)} open={open}>
        <div style={{ padding:20}}>
          <PropertyCard disabled />
        </div>
      </Drawer>
    </div>
    <div style={{position:'absolute', top:20, left:10}}>
      <img src={require('@/assets/images/logo.png').default} style={{width:100, height:50, objectFit:'contain'}} alt="" />
    </div>
    <div style={{position:'fixed', top:20, right:20}}>
      <IconButton onClick={()=>{
        setOpen(!open)
      }}>
        <ListIcon />
      </IconButton>
    </div>
  </ChapterContext.Provider>
}
